<style>
    .hgroup-title{
        text-align: center;
        overflow: hidden;
        width: 100%;
        height: 80px;
        transition: all .2s ease-out 0s;
        -moz-transition: all .2s ease-out 0s;
        -webkit-transition: all .2s ease-out 0s;
        -o-transition: all .2s ease-out 0s;
        background: #fff;
    }
    .hgroup-title h4{
        line-height: 80px;
        font-size: 22px;
    }
    .hgroup-title h6{
        line-height: 10px;
    }
    .hgroup-title.all h4{
        line-height: 80px;
        font-size: 22px;
        margin-top: -80px;
    }
    .btn-index{
        position: fixed;
        right: 0;
        top: 30px;
        width: 60px;
        height: 80px;
        z-index: 810;;
    }
    .iconfont{
        font-size: 24px;
    }
</style>
<template>
    <div class="btn-nav">
        <!--<i v-if="isIndex" @click="toggleHeader" data-toggle='all' class="iconfont icon-caidan1 app_color_b"></i>-->
        <i v-if="!isIndex" @click="back" class="iconfont icon-fanhui" data-toggle='all'></i>
    </div>
    <div class="btn-index">
        <a href="#/user" v-if="!isIndex" class="iconfont icon-shouye-copy-copy"></a>
    </div>
    <div class="overmap" data-toggle='all' @click="removeHeader">

    </div>
    <div class="fix-box" data-toggle='all'>
        <!-- Content Header (Page header) -->
        <section class="list-header clearfix padding">
            <div class="warp-min">
                <hgroup class="hd-title">
                    <h3 class="text-center">工作区域</h3>
                    <h5 class="text-min text-center">管理网站一步到位</h5>
                </hgroup>
                <ul class="box">
                    <li class="fl margin">
                        <a href="#/user">
                            <div class="list-box">
                            <span class="list-box-content">
                                admin<br><small>工作区域</small>
                            </span>
                            </div>
                        </a>
                    </li>
                    <li class="fl margin">
                        <div class="list-box">
                            <p class="list-box-content list-box-add">
                                <b>+</b><br>
                                <span>创建工作区域</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <h3 v-if="isIndex" class="content-title text-center">admin的工作区域</h3>
        <hgroup class="hgroup-title" v-else class="content-title text-center">
            <h4 class="titles">{{title}}</h4>
        </hgroup>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                isIndex:true,
                title:""
            }
        },
        methods: {
            removeHeader: function(){
                $("[data-toggle='all']").removeClass('all');
            },
            toggleHeader: function(){
                $("[data-toggle='all']").toggleClass('all');
            },
            toIndex: function(){
                router.go("user");
            },
            back: function(){
                window.history.go(-1);
            }
        },
        ready: function() {
            this.removeHeader();
            var _this = this;
            window.headerLoad = function(){
                var hash = window.location.hash.split("?");
                _this.title = $("title").text();
                if(!sessionStorage.getItem("key")){
                    router.go("login");
                }
                if(hash[0] == "#/user"||hash[0] == "#/login"){
                    _this.isIndex = true;
                }else{
                    _this.isIndex = false;
                }
            }
        }
    };

</script>